import React, { useState, useEffect } from 'react'
import { Table, Popconfirm, message, Drawer, Form, Input, Button, Select, Tree, Option } from 'antd';
import { goodstype, gooddelete, goodadd } from "../../apis/goods"
import {
    SettingFilled,
} from '@ant-design/icons';
import { connect } from 'react-redux';

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
const querystring = require('querystring');
export default function Apply() {
    const { Option } = Select;
    useEffect(() => {
        getgoodstype()
    }, [])
    //所有商品数据
    const [goods, setgoods] = useState([]);
    //搜索商品数据
    const [searchgoods, setsearch] = useState([]);
    const [state, setState] = useState({
        selectedRowKeys: [], // Check here to configure the default column
    });

    const [treeData, settreeData] = useState([])

    const [addgo, setaddgo] = useState({})
    //获取商品分类
    const getgoodstype = async () => {
        const res = await goodstype()
        setgoods(res.data.rows.children)
        settreeData(res.data.rows.children)
        setsearch(res.data.rows.children)
        // console.log(res);
    }
    //删除商品
    const cancel = async (data) => {
        const res = await gooddelete(data.id)
        getgoodstype()
        if (res.status) {
            message.error('删除成功');
        }
    }

    //打开抽屉
    const confirm = (e) => {
        setVisible(true);
    }

    const [visible, setVisible] = useState(false);


    //关闭抽屉
    const onClose = () => {
        setVisible(false);
    };
    //提交成功回调
    const onFinish = async (values) => {
        const data = JSON.stringify(addgo).replaceAll(":", "=").replaceAll('"', '').replaceAll(",", "&").replaceAll("{", "").replaceAll("}", "")
        setaddgo({ ...addgo, ...values })
        const res = await goodadd(data)
        getgoodstype()
        message.success('提交成功');
    };
    //提交搜索
    // const search = async (values) => {
    //     // console.log(goods);
    //     // console.log(values.type);
    //     const arr = goods.filter(item => JSON.stringify(item).indexOf(values.type) != -1)
    //     arr.filter(item=>{
    //         item.titel
    //     })
    //     console.log(arr);
    // };
    //关闭抽屉
    const onReset = () => {
        setVisible(false);
    };


    const onSelect = (selectedKeys, info) => {
        setaddgo({ ...addgo, pid: info.node.id })
        // console.log(addgo);
    };


    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '操作',
            key: 'tags',
            // dataIndex: 'tags',
            render: (data) => {
                return (
                    <Popconfirm
                        title="请选择操作"
                        onConfirm={() => confirm(data)}
                        onCancel={() => cancel(data)}
                        okText="增加"
                        cancelText="删除"
                    >
                        <SettingFilled></SettingFilled>
                    </Popconfirm>
                )
            }
        },
    ];
    const onSelectChange = selectedRowKeys => {
        // console.log('selectedRowKeys changed: ', selectedRowKeys);
        setState({ selectedRowKeys });
    };

    const { selectedRowKeys } = state;
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    return (
        <>
            <div>
                <Form
                    name="customized_form_controls"
                    layout="inline"
                    // onFinish={search}
                >
                    <Form.Item name="name" label="商品名称">
                        <Input />
                    </Form.Item>
                    <Form.Item name="type" label="状态">
                        <Select >
                            <Option value="启用">启用</Option>
                            <Option value="停用">停用</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            确认搜索
                        </Button>
                    </Form.Item>
                </Form>
            </div>
            <Table rowSelection={rowSelection} columns={columns} dataSource={searchgoods} scroll={{ y: 500 }} />
            <Drawer title="新增商品类型" placement="right" onClose={onClose} visible={visible} destroyOnClose={true}>
                <Form {...layout} name="control-hooks" onFinish={onFinish}>
                    <Form.Item name="name" label="商品类型名称" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="status" label="商品类型状态">
                        <Select
                            allowClear
                            initialvalues="1"
                        >
                            <Option value="1">启用</Option>
                            <Option value="7">停用</Option>
                        </Select>
                    </Form.Item>
                    <Tree
                        checkable={false}
                        onSelect={onSelect}
                        treeData={treeData}
                    />
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="button" onClick={onReset}>
                        取消
                    </Button>
                </Form>
            </Drawer>
        </>
    )
}
